<template>
  <div class="page">
    <div class="header">
      <img class="headimg" src="../assets/image/headerimg.png" alt="" />
    </div>
    <div class="content">
      <img class="contentimg" src="../assets/image/formimg.png" alt="" />
      <div class="form">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
          size="large">
          <div class="title">账号登录
            <img src="../assets/image/twowm.png" alt="">
          </div>
          <el-form-item prop="username">
            <el-input class="input" input-style="text-indent:20px" v-model="ruleForm.username" placeholder="请输入用户名" />
            <i class="iconfont icon-touxiang"></i>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input class="input" show-password input-style="text-indent:20px" :type="pwdType" v-model="ruleForm.pass"
              placeholder="请输入密码" />
            <i class="iconfont icon-password"></i>
            <div>
              <i @click="tabtype" class="pwdicon iconfont"></i>
            </div>

          </el-form-item>
          <div class="yzm">
            <el-form-item prop="verifyCode">
              <el-input class="input" input-style="text-indent:20px" v-model="ruleForm.verifyCode"
                placeholder="请输入验证码" />
              <i class="iconfont icon-password"></i>
            </el-form-item>
            <img class="yzmimg" :src="imgCode" alt="" />
          </div>
          <el-button class="button" type="primary" @click="submitForm()">登录</el-button>
        </el-form>
      </div>
    </div>
    <div class="footer">北京乐宁科技@2023 京ICP备17033472号-4</div>
  </div>
  {{ x }} {{ y }}
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue"
import type { FormInstance, FormRules } from 'element-plus'
import { getImgCode } from "../service/administrator/authCode";
import { useStore } from '../store/index'
import  useXY  from '../hoook/hooks'

const {x,y } = useXY()

const usestore = useStore()
// const {logining } = storeToRefs(usestore)


//密码框类型切换
let pwdType = ref("password");

const tabtype = () => {
  pwdType.value = pwdType.value == "password" ? "text" : "password";
}

//验证码图片
let imgCode = ref("");
//验证码token
let codeToken = ref("");
//获取验证码图片
const getImg = async () => {
  const res: any = await getImgCode();
  if (res.errCode === 10000) {
    imgCode.value = res.imageCode;
    codeToken.value = res.token;
  }
};
//表单验证
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  username: '',
  pass: '',
  verifyCode: '',
})
const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})
//表单提交
const submitForm = async () => {
  await ruleFormRef.value?.validate(async valid => {
    if (valid) {
      usestore.logining({
        pass: ruleForm.pass,
        token: codeToken.value,
        username: ruleForm.username,
        verifyCode: ruleForm.verifyCode
      }).catch(() => {
        getImg();
      })

    }
  })
}
//登录
// const router = useRouter();
// const logining = async () => {

//   const usestore = useStore();
//   const res: any = await login({

//   });

//   if (res.errCode === 10000) {
//     // sessionStorage.setItem("token", res.data.token);
//     // sessionStorage.setItem("menu",JSON.stringify(res.data.menu));
//     usestore.updataMenus(res.data.menu);
//     usestore.updataToken(res.data.token);
//     router.push("/");
//     return;
//   }
//   //出错重置验证码
//   ElMessage.error(res.errMsg)
//   res.errCode === 15000 && getImg();
// }
onMounted(() => {
  getImg();
})

</script>

<style lang="less" scoped>
@import url(../assets/login/login.less);
</style>
